<template>
  <div id="app">
    <HeaderView></HeaderView>
    <div class="search">
      <search-input />
      <router-link to="/login" tag="button" class="login-button"
        >登录</router-link
      >
      <router-link to="/reg" tag="button" class="cart-button"></router-link>
    </div>
  </div>
</template>

<style lang="scss">
* {
  margin: 0 auto;
  padding: 0;
}
.search {
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 30px;
}
.login-button {
  height: 40px;
  width: 60px;
  background: white;
  border: 1px solid black;
}
.cart-button {
  height: 40px;
  width: 60px;
  background: white;
  border: 1px solid black;
  background: url("./assets/image/cart.png") no-repeat;
  background-position: 20px 10px;
}
</style>
<script>
import HeaderView from "@/views/Header/headerView.vue";
import SearchInput from "@/components/searchInput.vue";
export default {
  components: {
    SearchInput,
    HeaderView,
  },
};
</script>
